import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xiaomishop/app/modules/gooddetail/views/sceond_good_view.dart';
import 'package:xiaomishop/app/modules/gooddetail/views/third_good_view.dart';
import 'package:xiaomishop/app/service/MyScreenExtention.dart';

import '../controllers/gooddetail_controller.dart';
import 'first_good_view.dart';

class GooddetailView extends GetView<GooddetailController> {
  GooddetailView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true, //实现透明导航,
        appBar: _appBar(context),
        body: _body(context));
  }

  _appBar(BuildContext context) {
    return PreferredSize(
        key: controller.appBarKey,
        preferredSize: Size.fromHeight(110.hh),
        child: Obx(() => AppBar(
              //leading默认会有一个区块，如果需要设置自定义的leading大小
              // ，可以自定义一个Container，再嵌套一个Container
              //在里层的Container设置大小
              leading: Container(
                  alignment: Alignment.center,
                  // color: Colors.blue,
                  child: SizedBox(
                      width: 78.ww,
                      height: 78.ww,
                      child: ElevatedButton(
                          onPressed: () {
                            Get.back();
                          },
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.black12),
                              foregroundColor:
                                  MaterialStateProperty.all(Colors.white70),

                              ///注意去除ElevatedButton的默认pading
                              padding: MaterialStateProperty.all(
                                  const EdgeInsets.all(0)),
                              shape: MaterialStateProperty.all(
                                  const CircleBorder())),
                          child:
                              const Icon(Icons.arrow_back_ios_new_outlined)))),
              actions: [
                Container(
                    margin: EdgeInsets.only(right: 30.ww),
                    width: 78.ww,
                    height: 78.ww,
                    child: ElevatedButton(
                        onPressed: () {
                          showCustomMenu(context);
                        },
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.black12),
                            foregroundColor:
                                MaterialStateProperty.all(Colors.white70),

                            ///注意去除ElevatedButton的默认pading
                            padding: MaterialStateProperty.all(
                                const EdgeInsets.all(0)),
                            shape: MaterialStateProperty.all(
                                const CircleBorder())),
                        child: const Icon(Icons.share))),
                Container(
                    margin: EdgeInsets.only(right: 30.ww),
                    width: 78.ww,
                    height: 78.ww,
                    child: ElevatedButton(
                        onPressed: () {
                          Get.back();
                        },
                        style: ButtonStyle(
                            //设置button的背景
                            backgroundColor:
                                MaterialStateProperty.all(Colors.black12),
                            //设置button里元素的颜色，这里就是设置icon的字体颜色
                            foregroundColor:
                                MaterialStateProperty.all(Colors.white70),

                            ///注意去除ElevatedButton的默认pading
                            padding: MaterialStateProperty.all(
                                const EdgeInsets.all(0)),
                            shape: MaterialStateProperty.all(
                                const CircleBorder())),
                        child: const Icon(Icons.more_horiz_rounded)))
              ],
              title: controller.showTab.value
                  ? Container(
                      alignment: Alignment.center,
                      child: Obx(() => SizedBox(
                          width: 360.ww,
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: controller.titleMap
                                  .map((v) => Expanded(
                                      flex: 1,
                                      child: InkWell(
                                          onTap: () {
                                            controller
                                                .setCurrentTitle(v["id"]!);
                                            //实现描点，跳到指定位置
                                            if (v["id"] == "1") {
                                              Scrollable.ensureVisible(
                                                  controller.key1.currentContext
                                                      as BuildContext);
                                            }
                                            if (v["id"] == "2") {
                                              Scrollable.ensureVisible(
                                                  controller.key2.currentContext
                                                      as BuildContext);
                                            }
                                            if (v["id"] == "3") {
                                              Scrollable.ensureVisible(
                                                  controller.key3.currentContext
                                                      as BuildContext);
                                            }
                                          },
                                          child: Column(
                                            children: [
                                              Text(v["title"]!,
                                                  style: TextStyle(
                                                      fontSize: 38.ss)),
                                              v["id"] ==
                                                      controller.titleId.value
                                                  ? Container(
                                                      height: 5.hh,
                                                      width: 60.ww,
                                                      color: Colors.red)
                                                  : SizedBox(
                                                      height: 5.hh,
                                                      width: 60.ww,
                                                    )
                                            ],
                                          ))))
                                  .toList()))))
                  : const Text(""),
              backgroundColor:
                  Colors.white70.withOpacity(controller.withOpacity.value),
              elevation: 0,
            )));
  }

  Widget _body(BuildContext context) {
    return Stack(children: [
      SingleChildScrollView(
        controller: controller.scrollController,
        child: Column(
          key: controller.containerKey,
          children: [
            FirstGoodView(parentContext: context),
            SceondGoodView(),
            ThirdGoodView()
          ],
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          height: 130.hh,
          decoration: const BoxDecoration(
              color: Colors.white,
              border:
                  Border(top: BorderSide(color: Colors.black12, width: 0.5))),
          child: Row(children: [
            Padding(
                padding: EdgeInsets.fromLTRB(40.ww, 0, 0, 0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.phone,
                        color: Colors.black38,
                        size: 46.hh,
                      ),
                      SizedBox(height: 10.hh),
                      Text("客服",
                          style:
                              TextStyle(color: Colors.black38, fontSize: 26.ss))
                    ])),
            Padding(
                padding: EdgeInsets.fromLTRB(70.ww, 0, 0, 0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.collections,
                        color: Colors.black38,
                        size: 46.hh,
                      ),
                      SizedBox(height: 10.hh),
                      Text("收藏",
                          style:
                              TextStyle(color: Colors.black38, fontSize: 26.ss))
                    ])),
            Padding(
                padding: EdgeInsets.fromLTRB(70.ww, 0, 0, 0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.shopping_cart,
                        color: Colors.black38,
                        size: 46.hh,
                      ),
                      SizedBox(height: 10.hh),
                      Text("购物车",
                          style:
                              TextStyle(color: Colors.black38, fontSize: 26.ss))
                    ])),
            Expanded(
                flex: 1,
                child: Container(
                    margin: EdgeInsets.fromLTRB(150.ww, 0, 0, 0),
                    width: double.infinity,
                    height: double.infinity,
                    child: Row(
                      children: [
                        Expanded(
                            flex: 1,
                            child: InkWell(
                                child: Container(
                                    margin:
                                        EdgeInsets.fromLTRB(0, 20.hh, 0, 20.hh),
                                    alignment: Alignment.center,
                                    decoration: const BoxDecoration(
                                        color: Colors.amber,
                                        borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(20),
                                            bottomLeft: Radius.circular(20))),
                                    child: Text(
                                      "加入购物车",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 32.ss),
                                    )),
                                onTap: () {
                                  shoGoodBottomSheet(context);
                                })),
                        Expanded(
                            flex: 1,
                            child: InkWell(
                                child: Container(
                                    margin: EdgeInsets.fromLTRB(
                                        0, 20.hh, 20.hh, 20.hh),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        color: Colors.red.shade300,
                                        borderRadius: const BorderRadius.only(
                                            topRight: Radius.circular(20),
                                            bottomRight: Radius.circular(20))),
                                    child: Text(
                                      "立即购买",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 32.ss),
                                    )),
                                onTap: () {
                                  shoGoodBottomSheet(context);
                                }))
                      ],
                    )))
          ]),
        ),
      ),
    ]);
  }

  /**
   * 弹出下拉框
   */

  void showCustomMenu(BuildContext context) {
    showMenu(
        context: context,
        position: RelativeRect.fromLTRB(70, 60, 50, 0),
        items: [
          PopupMenuItem(child: Text("hello world")),
          PopupMenuItem(child: Text("hello world")),
          PopupMenuItem(child: Text("hello world"))
        ]);
  }

  void shoGoodBottomSheet(BuildContext context) {
    Get.bottomSheet(Container(
      color: Colors.white,
      width: double.infinity,
      height: 1024.hh,
      child: Stack(
        children: [
          Positioned(
              top: 10.hh,
              right: 10.hh,
              bottom: 10.hh,
              left: 10.hh,
              child: Obx(() {
                return ListView(
                    children: controller.detail.value.pAttr!.map((value) {
                  List<Map> list = value["list"];
                  var cate = value["cate"];
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("$cate"),
                      Wrap(
                          alignment: WrapAlignment.start,
                          spacing: 20.ww,
                          runSpacing: 20.hh,
                          children: list.map((v) {
                            var checked = v["checked"];
                            var title = v["title"];

                            return checked == false
                                ? InkWell(
                                    onTap: () {
                                      controller.changeChecked(cate, title);
                                    },
                                    child: Container(
                                      padding: EdgeInsets.fromLTRB(
                                          30.ww, 10.hh, 30.ww, 10.hh),
                                      decoration: BoxDecoration(
                                          color: Colors.black38,
                                          borderRadius:
                                              BorderRadius.circular(20)),
                                      child: Text("$title",
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 32.ss)),
                                    ))
                                : Container(
                                    padding: EdgeInsets.fromLTRB(
                                        30.ww, 10.hh, 30.ww, 10.hh),
                                    decoration: BoxDecoration(
                                        color: Colors.white70,
                                        border: Border.all(
                                            width: 1, color: Colors.red),
                                        borderRadius:
                                            BorderRadius.circular(20)),
                                    child: Text("$title",
                                        style: TextStyle(
                                            color: Colors.red,
                                            fontSize: 32.ss)),
                                  );
                          }).toList()),
                    ],
                  );
                }).toList());
              })),
          Positioned(
              top: 10.hh,
              right: 10.ww,
              child: InkWell(
                child: Container(child: Icon(Icons.close)),
                onTap: () {
                  Get.back();
                },
              ))
        ],
      ),
    ));
  }
}
